<template>
  <div class="login-container">
    <el-form class="login-form" autoComplete="on" :model="loginForm" :rules="loginRules" ref="loginForm" label-position="left">
      <div class="title-container">
        <h3 class="title">代理商后台管理系统</h3>
        <transition name="fade-in">
          <div><img v-if="loginForm.logo" :src="loginForm.logo"></div>
        </transition>
      </div>
      <el-form-item prop="username">
        <span class="svg-container svg-container_login">
          <svg-icon icon-class="user" />
        </span>
        <el-input name="username" type="text" v-model="loginForm.username" placeholder="登录用户名" />
      </el-form-item>

      <el-form-item prop="password">
        <span class="svg-container">
          <svg-icon icon-class="password" />
        </span>
        <el-input name="password" :type="passwordType" @keyup.enter.native="handleLogin" v-model="loginForm.password" placeholder="登录密码" />
      </el-form-item>
      <el-form-item>
        <div class="check-box">
          <el-checkbox :v-model="loginForm.checked" @change="rempwd">记住密码</el-checkbox>
        </div>
      </el-form-item>
      <el-button type="primary" class="btn" :loading="loading" @click.native.prevent="handleLogin">欢迎登录</el-button>
      <div class="mess">
        <p>山西微特汇信息科技有限公司  晋ICP备17002661号  电话：0350-8556666  周一至周日（9：00-22：00）</p>
      </div>
    </el-form>
  </div>
</template>

<script>
import { getPassword, getUserName, getId } from '@/utils/auth'
export default {
  name: 'login',
  data() {
    const validatePassword = (rule, value, callback) => {
      if (value.length < 6) {
        callback(new Error('密码不能少于6位数字'))
      } else {
        callback()
      }
    }
    return {
      loginForm: {
        username: '',
        password: '',
        logo: '',
        checked: false
      },
      loginRules: {
        username: [{ required: true, trigger: 'blur', message: '必须填写哦~' }],
        password: [{ required: true, trigger: 'blur', validator: validatePassword }]
      },
      passwordType: 'password',
      loading: false,
      showDialog: false
    }
  },
  methods: {
    showPwd() {
      if (this.passwordType === 'password') {
        this.passwordType = ''
      } else {
        this.passwordType = 'password'
      }
    },
    handleLogin() {
      this.loading = true
      this.$store.dispatch('LoginByUsername', this.loginForm).then(() => {
        this.rempwd()
        this.loading = false
        this.$router.push({ path: '/' })
      }).catch(() => {
        this.loading = false
      })
    },
    rempwd(v) {
      this.loginForm.checked = v
    }
  },
  mounted() {
    if (getUserName() && getPassword()) {
      this.loginForm.username = getUserName()
      this.loginForm.password = getPassword()
    }
    this.$store.dispatch('handleLogo', getId() === undefined ? '' : getId()).then(response => {
      if (response.data.errorCode === 0) {
        this.loginForm.logo = response.data.result.company_logo
        const title = document.getElementsByTagName('title')[0]
        title.innerHTML = response.data.result.company_name
      } else {
        this.$message.error(response.data.errorMsg)
      }
    })
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">
  @import 'src/styles/login.scss';
</style>
